<template>
    <div class="producList">
        <!-- 弹层 -->
        <van-dialog v-model="isDialog" show-cancel-button :showCancelButton="false" :showConfirmButton="false">
            <ProduceListDialog @doClose="doClose" :sxflist="sxflist" :activeList="activeList">
            </ProduceListDialog>
        </van-dialog>
        <!-- 顶部 -->
        <div class="top">
            <div class="callback" @click="$router.back()">
                <img src="@/assets/callback.png" alt="">
            </div>
            <div class="top-title">
                Product List
            </div>
        </div>
        <!-- 列表 -->
        <GoodList v-for="(item, index) in goodsdata" :key="item.id" :item="item" :index="index" :goodsdata="goodsdata"
            @changeBtn="changeBtn">
        </GoodList>

        <!-- 提交按钮 -->
        <div class="bottom">
            <van-button class="submit" :class="{ 'button-active': activeList.length > 0 ? false : true }"
                @click="doSubmit">Submit</van-button>
        </div>
    </div>
</template>
<script>
import ProduceListDialog from "../components/ProduceListDialog";
import GoodList from '../components/GoodList'
import { getcpList, getUserInfo, sxfshisuan } from '../api/index.js'
import { jiami, jiemi } from "../utils/aeskey.js";
export default {
    name: 'ProduceList',
    components: { ProduceListDialog, GoodList },
    data() {
        return {
            //弹层的布尔值
            isDialog: false,
            goodsdata: [],//产品数据
            sxflist: [],
            activeList: [],//被选中的id
        }
    },
    created() {
        this.getorder()
    },
    computed: {
        // 传给弹窗的数据
        listDialog() {
            return this.list[this.current - 1]
        }
    },
    methods: {
        //点击列表
        doClick(item) {
            this.isActive = true
            this.current = item.id
        },
        // submit按钮
        async doSubmit() {
            const f = {
                model: {
                    productIds: []
                }
            }
            f.model.productIds = this.activeList
            console.log(f)
            //手续费试算
            const res = await sxfshisuan(jiami(f))
            console.log('计算手续费', jiemi(res.data))
            this.sxflist = jiemi(res.data).model
            this.isDialog = true
            console.log('sxfList', this.sxflist)
        },
        //关闭弹层
        doClose() {
            this.isDialog = false
        },
        //获取产品订单列表
        async getorder() {
            const res = await getcpList(jiami({ query: {} }))
            const result = jiemi(res.data)
            this.$store.dispatch('produceList/getList', result.page.content)
            this.goodsdata = result.page.content
            console.log('result', result)
        },
        //按钮高亮的切换
        changeBtn(val) {
            if (val.show) {
                this.activeList.push(val.id)
            } else {
                this.activeList = this.activeList.filter(item => item != val.id)
            }
        }
    }
}
</script>
<style scoped lang="less">
@a: 3.75vw;

.gl-active {
    background: #FFFFFF;
    border: (2/@a) solid #7E42FF !important;
    border-radius: (15/@a) !important;
}

/deep/ .button-active {
    background: #ccc !important;
}

.producList {
    width: 100vw;
    height: (800/@a);
    background-color: #f5f5f5;
    margin-top: (56/@a);

    // 列表
    .goodlist {
        width: (310/@a);
        height: (208/@a);
        background-color: #fff;
        margin-top: (13/@a);
        margin-left: (30/@a);
        border-radius: (15/@a);
        border: (2/@a) solid transparent;

        .gl-top {
            display: flex;
            padding-top: (12/@a);
            padding-left: (9/@a);

            .gl-logo {

                width: (20/@a);

                img {
                    width: 100%;
                }
            }

            .gl-desc {
                font-family: 'Inter';
                font-style: normal;
                font-weight: 500;
                font-size: (16/@a);
                color: #202020;
                margin-left: (8/@a);
            }
        }

        .gl-time {
            text-align: center;
            justify-content: space-around;
            display: flex;
            position: relative;
            left: (-10/@a);
            top: 0;
            width: (330/@a);
            height: (60/@a);
            background: linear-gradient(90deg, #7D42FF 0%, #BF36FE 100%);
            border-radius: (10/@a);
            padding-top: (10/@a);
            box-sizing: border-box;

            .gl-time-title {
                font-family: 'Inter';
                font-style: normal;
                font-weight: 400;
                font-size: (12/@a);
                text-align: center;
                color: #FFFFFF;
            }

            .gl-time-data {
                font-family: 'Inter';
                font-style: normal;
                font-weight: 700;
                font-size: (20/@a);
                line-height: 200%;
                text-align: center;
                color: #FFFFFF;
            }
        }



        .gl-content {
            display: flex;
            justify-content: space-between;

            .gl-content-left {
                width: 50%;
                height: 30px;
                font-family: 'Inter';
                font-style: normal;
                font-weight: 400;
                font-size: (12/@a);
                text-align: left;
                color: #808080;
                margin-left: (38/@a);

            }

            .gl-content-right {
                width: 30%;
                height: 30px;
                font-family: 'Inter';
                font-style: normal;
                font-weight: 400;
                font-size: (12/@a);
                text-align: right;
                color: #202020;
                margin-right: (50/@a);
            }

            .gl-content-father {
                display: flex;
                flex-direction: column;
                justify-content: center;

                li {
                    margin-top: (10/@a);
                }
            }
        }

    }

    .top {
        height: (56/@a);
        background-color: #fff;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;

        .callback {
            margin-top: (20/@a);
            margin-left: (15/@a);
            width: (10/@a);

            img {
                width: 100%;
            }
        }

        .top-title {
            margin-top: (17/@a);
            margin-right: (128/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (18/@a);
            color: #202020;
        }
    }

    .bottom {
        width: 100vw;
        position: fixed;
        bottom: 0;
        left: 0;
        height: (60/@a);
        text-align: center;
        background-color: #fff;

        .submit {
            width: (232/@a);
            height: (44/@a);
            background: linear-gradient(90deg, #8042FF 0%, #BC37FF 100%);
            border-radius: (10/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 700;
            font-size: (18/@a);
            color: #FFFFFF;
            margin-top: (7/@a);
        }
    }
}
</style>